<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content=" width=device-width, initial-scale=1.0">
    <title>我的模板</title>

</head>

<body>

    <!-- 最新写法 -->

    <!--  <template v-slot:right>

          </template> -->
    <!-- 过时写法 -->
    <!--  <div slot="right">
                <span>alll</span>
            </div> -->
    <div id="app">
        <cpn>

            <template v-slot:left>
            <span>啦啦啦</span>
          </template>

            <template v-slot:centent>

          </template>
            <template v-slot:right>

          </template>

        </cpn>



    </div>


</body>


<template id="cpns">
  <div>
    <slot name="left"><button>左边</button></slot> 
    <slot name="content"><button>中间</button></slot> 
    <slot name="right"><button>右边</button></slot> 
  </div>
</template>

<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {

        },
        components: {
            cpn: {
                template: '#cpns',


            }
        }
    })
</script>